// SPDX-License-Identifier: GPL-3.0-or-later

import QtQuick
import QtQuick.Layouts
import Fk
import Fk.Pages
import Fk.RoomElement

GraphicsBox {
  id: root
  property var selected_ids: []
  property var ok_options: []
  property var disable_cards: []
  property var cancel_options: []
  property var cards: []
  property int min
  property int max
  property string skill_name: ""
  property string detail_content: ""
  property int result

  title.text: Backend.translate(prompt !== "" ? Util.processPrompt(skill_name) : "$Choice")
  width: 550
  height: human.height + title.height + decontent.height + 50

  Component {
    id: cardDelegate
    CardItem {
      scale: 0.8
      Component.onCompleted: {
        setData(modelData);
      }
      autoBack: false
      showDetail: true
      selectable: !disable_cards.includes(cid)
      onSelectedChanged: {
        if (selected) {
          chosenInBox = true;
          root.selected_ids.push(cid);
        } else {
          chosenInBox = false;
          root.selected_ids.splice(root.selected_ids.indexOf(cid), 1);
        }
        root.selected_ids = root.selected_ids;
      }
    }
  }

  Flickable {
    id: decontent
    x:10
    anchors.top:title.bottom
    anchors.topMargin: 10
    contentHeight: 130
    width: parent.width - 10
    height: detail.height
    clip: true
    Text {
      id: detail
      width: parent.width
      // height: parent.height
      text: luatr(detail_content)
      color: "white"
      wrapMode: Text.WordWrap
      font.pixelSize: 16
      textFormat: TextEdit.RichText
    }
  }

  GeneralCardItem {
    anchors.top:decontent.bottom
    anchors.topMargin: 10
    anchors.left:decontent.left
    anchors.leftMargin: 10
    id: human
    name: "caocao"
    visible: name !== ""
  }

  Flickable {
    id: choiceContainer
    // ScrollBar.horizontal: ScrollBar {}

    flickableDirection: Flickable.HorizontalFlick
    width: 400
    height: 120
    // anchors.fill: parent
    anchors.top:decontent.bottom
    // anchors.topMargin: 1
    anchors.left:human.right
    anchors.leftMargin: 10

    contentWidth: cardsList.width
    contentHeight: Math.min(cardsList.height,120)
    clip: true

    ColumnLayout {
      id: cardsList
      anchors.top: parent.top

      Row {
        spacing: 0
        Repeater {
          id: to_select
          model: cards
          delegate: cardDelegate
        }
      }
    }
  }

  Item {
    id: buttonArea
    anchors.top:choiceContainer.bottom
    anchors.topMargin: 5
    anchors.left:human.right
    anchors.leftMargin: 155
    height: 40

    Row {
      anchors.verticalCenter: parent.verticalCenter
      anchors.bottom: parent.bottom
      spacing: 8

      Repeater {
        model: ok_options

        MetroButton {
          Layout.fillWidth: true
          text: Util.processPrompt(modelData)
          enabled: root.selected_ids.length >= root.min && root.selected_ids.length <= root.max

          onClicked: {
            close();
            roomScene.state = "notactive";
            const reply = JSON.stringify(
              {
                cards: root.selected_ids,
                choice: modelData,
              }
            );
            ClientInstance.replyToServer("", reply);
          }
        }
      }

      Repeater {
        model: cancel_options

        MetroButton {
          Layout.fillWidth: true
          text: Util.processPrompt(modelData)
          enabled: true

          onClicked: {
            close();
            roomScene.state = "notactive";
            const reply = JSON.stringify(
              {
                cards: [],
                choice: modelData,
              }
            );
            ClientInstance.replyToServer("", reply);
          }
        }
      }
    }
  }

  function loadData(data) {
    console.log(data)
    skill_name = data[0];
    detail_content = data[1];
    human.name = data[2];
    cards = data[3].map(cid => {
      if (typeof cid === 'object') {
        return cid;
      }
      return lcall("GetCardData", cid);
    });
    min = data[4] ?? 1
    max = data[5] ?? 1
    ok_options = data[6] ?? []
    cancel_options = data[7] ?? []
    disable_cards = data[8] ?? []
  }
}
